<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>CSS 不阻塞 DOM 解析</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: lightgreen;
            }
        </style>
        <!-- 有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。 -->
        <script async src="/js/log.js"></script>
        <link rel="stylesheet" href="/css/sleep3000-common.css" />
    </head>
    <body>
        <div></div>
        <p>
            首先打印出 div 这个 DOM 节点，过 3s 左右之后才渲染出一个浅蓝色的 div。
            这就证明 DOM 在 CSS 下载解析之前就完成了解析。
        </p>
    </body>
</html>
